$(function () {
    let page = 1 // 当前页码
    let perpage = 5 // 每页所显示的数量
    // 动态渲染列表数据
    // 10、文章搜索
    // 请求地址：/admin/article/query
    // 请求方式：get
    $.ajax({
        url: bignew.category_list,
        dataType: 'json',
        success: function (res) {
            console.log(res);
            if (res.code == 200) {
                // 调用模板引擎的时候传入一个对象，在模板中可以使用这个对象的属性
                let html = template('cateListTemp', res)
                $('#selCategory').html(html)
            }
        }
    })
    // 动态渲染列表数据
    // 10、文章搜索
    // 请求地址：/admin/article/query
    // 请求方式：get
    // 列表渲染 + 筛选 + 分页 都是数据的查询
    function init() {
        $.ajax({
            url: bignew.article_query,
            data: {
                page,
                perpage,
                type: $('#selCategory').val(),// 文章的分类，如果为空则查询所有分类 
                state: $('#selStatus').val()// 文章的状态如果为空则查询所有状态
            },
            dataType: 'json',
            success: function (res) {
                console.log(res)
                $('tbody').html(template('articleListTemp', res.data))
                setPage(res.data.totalPage)
            }
        })
    }
    init()

    // 实现文章数据的筛选
    $('.btn-search').on('click', function (e) {
        e.preventDefault()
        console.log($('#selCategory').val())
        console.log($('#selStatus').val())
        // 将页码重置到1
        page = 1
        init()
    })
    function setPage(total) {
        $('.pagination').bootstrapPaginator({
            //设置版本号
            bootstrapMajorVersion: 3,
            // 显示第几页
            currentPage: page,
            // 总页数
            totalPages: total,
            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event, originalEvent, type, cpage) {
                // cpage就是用户当前所单击的页码值，我们只需要让ajax根据这个页码去获取数据
                // 1.重置全局的page
                // 2.让ajax重新发送请求
                console.log(cpage)
                page = cpage
                init()
            }
        })
    }
})